<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>书写模式属性(writing-mode attribute)</title>
    <!-- 
  CSS中的 writing-mode 定义了文本水平或垂直排布以及在块级元素中文本的行进方向。它可以控制文本是从左到右、从上到下，还是其他方向。属性值说明： 
 
    1. **horizontal-tb**:  
      - 水平书写，从上到下（默认值）。 
      - 适用于大多数西方语言。 
    
    3. **vertical-lr**:  
      - 垂直书写，从左到右。 
      - 适用于某些特定的书写需求。 

    3. **vertical-rl**:  
      - 垂直书写，从右到左。 
      - 适用于一些东亚语言，如中文和日文。 
    
    4. **sideways-rl**:  
      - 侧向书写，从右到左。 
      - 文字会以垂直方式呈现，但旋转90度。 
    
    5. **sideways-lr**:  
      - 侧向书写，从左到右。 
      - 文字同样以垂直方式呈现，但旋转90度。 
  -->
    <style>
      .table {
        border-collapse: collapse;
      }

      table th {
        border: 1px solid #ccc;
        padding: 10px;
        background-color: bisque;
      }

      .table td {
        border: 1px solid #ccc;
        padding: 10px;
      }

      .example {
        position: relative;
        margin: 20px;
        padding: 20px;
        border: 1px solid #ccc;
      }

      .example .cover {
        opacity: 0;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        color: white;
        font-size: 16px;
        transition: opacity 1s ease-in-out;
      }
      
      /* 1.水平书写，从上到下 */
      .example.horizontal-tb {
        writing-mode: horizontal-tb;
      }

      .example.horizontal-tb:hover .cover {
        opacity: 1;
        writing-mode: horizontal-tb;
      }

      /* 2.垂直书写，从左到右。 */
      .example.vertical-lr {
        writing-mode: vertical-lr;
      }

      .example.vertical-lr:hover .cover {
        opacity: 1;
        writing-mode: vertical-lr;
      }

      /* 3.垂直书写，从右到左。 */
      .example.vertical-rl {
        writing-mode: vertical-rl;
      }

      .example.vertical-rl:hover .cover {
        opacity: 1;
        writing-mode: vertical-rl;
      }

      /* 4.侧向书写，从左到右 */
      .example.sideways-lr {
        writing-mode: sideways-lr;
      }

      .example.sideways-lr:hover .cover {
        opacity: 1;
        writing-mode: sideways-lr;
      }

      /* 5.侧向书写，从右到左 */
      .example.sideways-rl {
        writing-mode: sideways-rl;
      }

      .example.sideways-rl:hover .cover {
        opacity: 1;
        writing-mode: sideways-rl;
      }
    </style>
  </head>
  <body>
    <table class="table">
      <tr>
        <th>writing-mode值</th>
        <th scope="row" colspan="3">基本内容</th>
        <th>鼠标hover显示</th>
      </tr>
      <tr>
        <td>horizontal-tb</td>
        <td class="example horizontal-tb"><span>1.水平书写，从上到下</span></td>
        <td class="example horizontal-tb"><span>1.水平书写，从上到下</span></td>
        <td class="example horizontal-tb"><span>1.水平书写，从上到下</span></td>
        <td class="example horizontal-tb"><span class="cover">1.水平书写，从上到下</span></td>
      </tr>
      <tr>
        <td>vertical-lr</td>
        <td class="example vertical-lr"><span>2.垂直书写，从左到右</span></td>
        <td class="example vertical-lr"><span>2.垂直书写，从左到右</span></td>
        <td class="example vertical-lr"><span>2.垂直书写，从左到右</span></td>
        <td class="example vertical-lr"><span class="cover">2.垂直书写，从左到右</span></td>
      </tr>
      <tr>
        <td>vertical-rl</td>
        <td class="example vertical-rl"><span>3.垂直书写，从右到左。</span></td>
        <td class="example vertical-rl"><span>3.垂直书写，从右到左。</span></td>
        <td class="example vertical-rl"><span>3.垂直书写，从右到左。</span></td>
        <td class="example vertical-rl"><span class="cover">3.垂直书写，从右到左。</span></td>
      </tr>
      <tr>
        <td>sideways-lr</td>
        <td class="example sideways-lr"><span>4.侧向书写，从左到右</span></td>
        <td class="example sideways-lr"><span>4.侧向书写，从左到右</span></td>
        <td class="example sideways-lr"><span>4.侧向书写，从左到右</span></td>
        <td class="example sideways-lr"><span class="cover">4.侧向书写，从左到右</span></td>
      </tr>
      <tr>
        <td>sideways-rl</td>
        <td class="example sideways-rl"><span>5.侧向书写，从右到左</span></td>
        <td class="example sideways-rl"><span>5.侧向书写，从右到左</span></td>
        <td class="example sideways-rl"><span>5.侧向书写，从右到左</span></td>
        <td class="example sideways-rl"><span class="cover">5.侧向书写，从右到左</span></td>
      </tr>
    </table>
  </body>
</html>
